<template>
  <div>
    <el-card style="line-height:90px">
      <div style="display:inline-block;float:left;margin-left:30px">
        销售时间：
        <font color="409EFF">{{date}}</font>
      </div>
      <div style="display:inline-block;margin-left:10px">
        <span style="float:left;margin-right:20px">优惠选择</span>
        <el-select v-model="value" placeholder="请选择" style="float:left">
          <el-option
            style="margin:0px"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span style="margin-left:50px">
          收银员：
          <font color="409EFF">{{userName}}</font>
        </span>
      </div>
    </el-card>
    <div style="height:20px"></div>
    <el-card body-style="height:400px;background-color:#fffbf0">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
        :header-cell-style="{background:'#F0FFFF'}"
      >
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="code" label="条形码"></el-table-column>
        <el-table-column prop="clothes.name" label="服装名称"></el-table-column>
        <el-table-column prop="color.color" label="颜色"></el-table-column>
        <el-table-column prop="size.size" label="尺码"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="discount" label="折扣" :formatter="discountFormat"></el-table-column>
        <el-table-column prop="money" label="折后价格" :formatter="afterDiscountFormat"></el-table-column>
        <el-table-column label="数量">
          <template>{{number}}</template>
        </el-table-column>
        <el-table-column prop="person" label="收银员" :formatter="userFormat"></el-table-column>
        <el-table-column prop="count" label="备注"></el-table-column>
        <!-- <el-table-column prop="count" label="合计金额"></el-table-column> -->
        <el-table-column prop="count" label="优惠方案" :formatter="Discount"></el-table-column>
        <el-table-column fixed="right" label="操作" height="30px">
          <template slot-scope="scope">
            <el-button type="text" @click="open(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="height:20px"></div>
    <el-card>
      <div class="check">
        <el-row>
          <el-input
            v-model="input"
            placeholder="请输入条形码、服装编号、服装名称+回车"
            style="display:inline-block;width:300px;float:left;margin:30px 50px"
            @keyup.enter.native="check1"
          ></el-input>
          <el-button type="primary" plain style="float:left;margin-top:30px" @click="check1">查询</el-button>
        </el-row>
        <!-- 查询弹出框 -->
        <el-dialog
          title="服装商品查询"
          :visible.sync="checkDialogFromVisible"
          :append-to-body="true"
          center
        >
          <el-row>
            <!-- <el-input
              placeholder="请输入服装编号或服装名称"
              v-model="input"
              class="input-with-select"
              @keyup.enter.native="check2"
            >
              <el-button slot="append" icon="el-icon-search" @click="check2"></el-button>
            </el-input>-->
            <div style="margin-top: 15px;">
              <el-input
                placeholder="请输入服装编号或服装名称"
                v-model="input"
                class="input-with-select"
                @keyup.enter.native="check2"
              >
                <el-select
                  v-model="select"
                  slot="prepend"
                  placeholder="请选择"
                  style="width:120px"
                  @change="change"
                >
                  <el-option label="服装编号" value="1" style="margin:0px"></el-option>
                  <el-option label="服装名称" value="2" style="margin:0px"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="check2"></el-button>
              </el-input>
            </div>
          </el-row>
          <el-table
            :data="tableData2"
            border
            style="width: 100%;margin-top:30px"
            empty-text="暂无数据"
            :header-cell-style="{background:'#F0FFFF'}"
            @row-click="add"
          >
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="code" label="条形码"></el-table-column>
            <el-table-column prop="clothes.name" label="名称"></el-table-column>
            <el-table-column prop="color.color" label="颜色"></el-table-column>
            <el-table-column prop="size.size" label="尺码"></el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column prop="remains" label="库存数"></el-table-column>
          </el-table>
        </el-dialog>
        <el-row>
          <el-button type="primary" plain class="clean" style="margin-bottom:50px" @click="reset">清空</el-button>
          <el-button type="primary" plain class="back" @click="tan">退货</el-button>
          <!-- 弹出第一个框 -->
          <el-dialog title="退货" :visible.sync="ding1" :append-to-body="true" center>
            <el-row>
              <div style="margin-top: 15px;">
                <el-input
                  placeholder="请输入订单号"
                  v-model="dan1"
                  class="input-with-select"
                  @keyup.enter.native="danCheck1"
                  style="width:300px"
                ></el-input>
                <el-button @click="danCheck1" type="primary" style="margin-left:20px">查询</el-button>
              </div>
            </el-row>
            <el-table
              :data="tableData3"
              border
              style="width: 100%;margin-top:30px"
              empty-text="暂无数据"
              :header-cell-style="{background:'#F0FFFF'}"
            >
              <el-table-column prop="idorder" label="订单号"></el-table-column>
              <el-table-column prop="user.userName" label="经手人"></el-table-column>
              <el-table-column prop="time" label="时间"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="tan2(scope.row)" size="small">退货</el-button>
                  <!-- 第二个弹出框 -->
                  <el-dialog
                    :title="`订单号：${dingdanhao}`"
                    :visible.sync="ding2"
                    :append-to-body="true"
                    center
                  >
                    <el-table
                      :data="tableData8"
                      border
                      style="width: 100%;margin-top:30px"
                      empty-text="暂无数据"
                      :header-cell-style="{background:'#F0FFFF'}"
                    >
                      <el-table-column prop="norms.clothes.name" label="服装名称"></el-table-column>
                      <el-table-column prop="norms.color.color" label="颜色"></el-table-column>
                      <el-table-column prop="norms.size.size" label="尺码"></el-table-column>
                      <el-table-column prop="norms.price" label="单价"></el-table-column>
                      <!-- <el-table-column prop="idorder" label="折扣"></el-table-column> -->
                      <!-- <el-table-column label="数量"></el-table-column> -->
                      <el-table-column prop="number" label="数量"></el-table-column>
                      <el-table-column prop="user.userName" label="经手人"></el-table-column>
                      <el-table-column prop="note" label="备注"></el-table-column>
                      <el-table-column prop="total" label="合计金额"></el-table-column>
                      <el-table-column prop="time" label="时间"></el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            @click="tan3(scope.row)"
                            size="small"
                            v-if="!scope.row.time"
                          >退货</el-button>
                          <el-button type="text" size="small" v-else style="color:red">已退货</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
          <!-- 第三个弹出框 -->
          <el-dialog title="退货登记" :visible.sync="ding3" center :append-to-body="true">
            <!-- :append-to-body="false" -->
            <el-form :model="tableData5">
              <el-row>
                <el-col :span="12">
                  <el-form-item>
                    <strong>订单号：</strong>
                    {{ dingdanhao }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item>
                    <strong>服装名称：</strong>
                    {{ clothes.name }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item>
                    <strong>颜色：</strong>
                    {{ color.color }}
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item>
                    <strong>尺码：</strong>
                    {{ size.size }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item>
                    <strong>数量：</strong>
                    <el-input style="width:200px" v-model="tableData5.number"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item>
                    <strong>退款金额：</strong>
                    <el-input style="width:200px" v-model="norms.price"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item>
                    <strong>备注：</strong>
                    <el-input style="width:200px" v-model="tableData5.note"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item>
                    <div style="margin-left:300px">
                      <el-button type="primary" @click="back">确定</el-button>
                      <el-button type="primary" @click="ding3=false">取消</el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-dialog>
          <el-button
            type="primary"
            plain
            class="back"
            style="margin-right:10px;margin-left:10px"
            @click="cal"
          >结算</el-button>
          <!-- 弹出结算框 -->
          <el-dialog title="结算" :visible.sync="getDialogFromVisible" :append-to-body="true" center>
            <el-row>
              <span>应付款：</span>
              <el-input v-model="this.total" style="display:inline-block;width:230px;margin:10px"></el-input>
              <span>收款：</span>
              <el-input
                v-model="get"
                placeholder="请输入"
                style="display:inline-block;width:230px;margin:10px"
              ></el-input>
            </el-row>
            <el-row>
              <span>找零：</span>
              <el-input v-model="changes" style="display:inline-block;width:230px;margin:10px"></el-input>
              <span>支付方式：</span>
              <el-select v-model="way" placeholder="请选择" style="width:230px">
                <el-option label="现金" value="1" style="margin:0px"></el-option>
                <el-option label="支付宝" value="2" style="margin:0px"></el-option>
              </el-select>
            </el-row>
            <el-button type="primary" style="margin-left:270px;margin-top:20px" @click="end">结算</el-button>
          </el-dialog>
        </el-row>
      </div>
      <div class="blue">
        <ul>
          <li>
            <h1>总价：{{total}}</h1>
          </li>
          <li>
            <h1>数量：{{nub}}</h1>
          </li>
          <li>
            <h1>原价：{{price}}</h1>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
import store from "../../store";

export default {
  data() {
    return {
      date: new Date(),
      value: "",
      options: [
        {
          label: "无折扣",
          value: "1"
        },
        {
          label: "统一折扣",
          value: "2"
        },
        {
          label: "满额折额",
          value: "3"
        }
      ],
      tableData: [],
      tableData2: [],
      input: "",
      checkDialogFromVisible: false,
      total: "0",
      nub: "200",
      price: "300",

      select: "",
      flag: "",
      name: "",
      arr: [],
      money: [],
      get: "",
      changes: "",
      getDialogFromVisible: false,
      way: "",
      ding1: false,
      ding2: false,
      ding3: false,
      dan1: "",
      tableData3: [],
      dingdanhao: "",
      tableData5: {},
      tableData8: [],
      clothes: "",
      color: "",
      size: "",
      norms: {},
      number: 1
    };
  },
  methods: {
    danCheck1() {
      this.ding2 = true;
      this.$axios({
        url: "/Order/getOrderDetail",
        method: "post",
        params: { idorder: this.dan1 }
      })
        .then(res => {
          // console.log(res.data.data);
          this.tableData4 = res.data.data;
          console.log(this.tableData4);
        })
        .then(
          this.$axios({
            url: "/getReturnNorm",
            method: "post",
            params: { orderid: this.dan1 }
          }).then(res => {
            this.tableData8 = [...this.tableData4, ...res.data.data];
            this.dingdanhao = this.dan1;
            // console.log(this.tableData8
          })
        );
    },
    back() {
      console.log("tuile");
      this.$axios({
        url: "/returnSingle",
        method: "get",
        params: {
          normid: this.norms.id,
          orderid: this.tableData5.idorder,
          userid: store.state.userNo,
          number: this.tableData5.number,
          toatal: this.norms.price,
          note: "无"
        }
      }).then(res => {
        this.$message({
          type: "info",
          message: "ok"
        });
        console.log(res);
        this.ding3 = false;
        this.ding2 = false;
      });
    },
    check1() {
      if (this.input.match(/\d{13}/)) {
        console.log("chenggong");
        this.$axios({
          url: "/Order/getNormsByCode",
          method: "get",
          params: { code: this.input }
        }).then(res => {
          // console.log(res.data.code);
          if (res.data.code == -1) {
            this.checkDialogFromVisible = true;
            this.$message({
              type: "error",
              message: "条形码错误"
            });
          } else {
            console.log(res.data);
            this.tableData.push(res.data[0]);
            // console.log(this.tableData);
          }
        });
      } else {
        this.checkDialogFromVisible = true;
        this.$message({
          type: "error",
          message: "条形码错误"
        });
      }
    },
    cal() {
      this.getDialogFromVisible = true;
    },
    end() {
      let obj = {
        pay: this.total,
        iduser: store.state.userNo,
        iddiscount: this.value,
        idkind: this.way,
        order_list: this.tableData
      };
      this.$axios({
        url: "/Order/getNormByNameFlag",
        method: "post",
        data: JSON.stringify(obj)
      }).then(res => {
        console.log("jiesuanjjjjj");
        console.log(res);
        this.getDialogFromVisible = false;
        this.$message({
          type: "info",
          message: res.statusText
        });
      });
      // let obj1 = {
      //   pay: this.total,
      //   iduser: store.state.userNo,
      //   iddiscount: this.value,
      //   order_list: this.tableData
      // };
      // this.$axios({
      //   url: "/Order/calculation",
      //   method: "post",
      //   datas: JSON.stringify(obj1)
      // }).then(res => {
      //   console.log("jisuankkkkk");
      //   console.log(res);
      //   // this.$message({
      //   //   type: "error",
      //   //   message: res.statusText
      //   // });
      // });
    },
    check2() {
      console.log(33);
      this.$axios({
        url: "/Order/getNormByNameFlag",
        method: "get",
        params: { name: this.name, flag: this.flag }
      }).then(res => {
        console.log(res.data);
        // console.log(res.data.code);
        // console.log(res.data);
        this.tableData2 = res.data;
      });
    },
    tan() {
      this.ding1 = true;
      this.$axios({
        url: "/Order/getAllOrder",
        method: "get"
      }).then(res => {
        // console.log("所有订单");
        // console.log(res.data.data);
        this.tableData3 = res.data.data;
      });
    },
    tan2(row) {
      this.ding2 = true;
      this.dingdanhao = row.idorder;
      this.$axios({
        url: "/Order/getOrderDetail",
        method: "post",
        params: { idorder: row.idorder }
      })
        .then(res => {
          this.tableData4 = res.data.data;
          console.log("zhixingle1");
        })
        .then(
          this.$axios({
            url: "/getReturnNorm",
            method: "post",
            params: { orderid: row.idorder }
          }).then(res => {
            console.log(888);
            this.tableData8 = [...this.tableData4, ...res.data.data];
            console.log(this.tableData8);
          })
        );
    },
    tan3(row) {
      this.ding3 = true;
      this.tableData5 = row;
      this.clothes = row.norms.clothes;
      this.color = row.norms.color;
      this.size = row.norms.size;
      this.norms = row.norms;
      console.log("xin");
      console.log(row);
    },
    change(value) {
      if (value == 1) {
        this.flag = this.input;
        this.name = "";
      } else if (value == 2) {
        this.name = this.input;
        this.flag = "";
      }
    },
    change2(value) {},
    discountFormat(row) {
      if (this.value == 1) {
        return "无";
      } else if (this.value == 2) {
        return store.state.alldiscount;
        // console.log(store.state.alldiscount);
      } else if (this.value == 3) {
        return "折额";
      }
    },
    userFormat(row) {
      return store.state.userName;
    },
    afterDiscountFormat(row, column, cellValue, index) {
      // console.log(row);
      if (this.value == 1) {
        return row.price;
      } else if (this.value == 2) {
        let value1 = Number(row.price);
        let value2 = Number(store.state.alldiscount);
        let value3 = value1 * value2;
        let value4 = value3.toFixed(2);
        // console.log(typeOf(value4));
        // console.log(cellValue);
        // this.total += Number(cellValue);
        return value4;
        // console.log(store.state.alldiscount);
      } else if (this.value == 3) {
        if (this.price >= store.state.border3) {
          return (
            row.price -
            (row.price / this.price) * store.state.border_rule3
          ).toFixed(2);
        } else if (this.price >= store.state.border2) {
          return (
            row.price -
            (row.price / this.price) * store.state.border_rule2
          ).toFixed(2);
        } else if (this.price >= store.state.border1) {
          return (
            row.price -
            (row.price / this.price) * store.state.border_rule1
          ).toFixed(2);
        } else {
          return row.price;
        }
      }
    },
    Discount() {
      if (this.value == 1) {
        return "无折扣";
      } else if (this.value == 2) {
        return "统一折扣";
      } else if (this.value == 3) {
        return "满额折额";
      }
    },
    reset() {
      this.tableData = [];
      this.input = "";
      this.nub = 0;
      this.total = 0;
      this.price = 0;
    },
    formatDate(date1) {
      var date2 = new Date();
      var date = date1 ? date1 : date2;
      var week = this.getWeek(date);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var day = date.getDate();
      day = day < 10 ? "0" + day : day;
      var hours = date.getHours();
      hours = hours < 10 ? "0" + hours : hours;
      var minutes = date.getMinutes();
      minutes = minutes < 10 ? "0" + minutes : minutes;
      var seconds = date.getSeconds();
      seconds = seconds < 10 ? "0" + seconds : seconds;
      // 2019-07-23 09:40:30
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        "  " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds +
        "\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
        week
      );
    },
    getWeek(d) {
      var weekday = new Array(7);
      weekday[0] = "星期日";
      weekday[1] = "星期一";
      weekday[2] = "星期二";
      weekday[3] = "星期三";
      weekday[4] = "星期四";
      weekday[5] = "星期五";
      weekday[6] = "星期六";

      return weekday[d.getDay()];
    },
    add(row) {
      // console.log(row);
      this.tableData.push(row);
    },
    open(row) {
      this.tableData = this.tableData.filter(item => item.id !== row.id);
    }
  },
  mounted() {
    this.userName = store.state.userName;
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = this.formatDate(); // 修改数据date
    }, 1000);
  },
  beforeUpdate() {
    // console.log(this.tableData);
    // console.log(this.money);
    // this.total = val;

    let val1 = 0;
    this.tableData.forEach(item => {
      val1 += Number(item.price);
    });
    this.price = val1;
    let val2 = 0;
    let val3 = 0;
    if (this.value == 2) {
      this.tableData.forEach(item => {
        val2 += Number(item.price) * Number(store.state.alldiscount);
      });
      this.total = val2.toFixed(2);
    } else if (this.value == 1) {
      this.total = this.price;
    } else if (this.value == 3) {
      // console.log(this.price);
      if (this.price >= store.state.border3) {
        // return (

        this.tableData.forEach(item => {
          val3 +=
            Number(item.price) -
            (Number(item.price) / Number(this.price)) *
              Number(store.state.border_rule3);
        });
        this.total = val3;
      } else if (this.price >= store.state.border2) {
        this.tableData.forEach(item => {
          val3 +=
            Number(item.price) -
            (Number(item.price) / Number(this.price)) *
              Number(store.state.border_rule2);
        });
        this.total = val3;
      } else if (this.price >= store.state.border1) {
        this.tableData.forEach(item => {
          val3 +=
            Number(item.price) -
            (Number(item.price) / Number(this.price)) *
              Number(store.state.border_rule1);
        });
        this.total = val3;
      } else {
        return row.price;
      }
    }
    this.nub = this.tableData.length;
    this.changes = this.get - this.total;
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }
  // check() {
  //   console.log("sb");
  // }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.clean {
  /* float: left; */
  width: 200px;
  margin-bottom: 50px;
}
.back {
  float: left;
  width: 200px;
  margin-bottom: 50px;
}
.check {
  float: left;
  margin-left: 120px;
}
.blue {
  background-color: #e9e7ef;
  height: 200px;
  width: 300px;
  float: right;
  margin-right: 100px;
  margin-bottom: 20px;
}
li {
  list-style: none;
  margin: 50px 50px;
}
</style>